<template>
  <div class="financial-management">
    <!-- 导航栏 -->
    <div class="tabbar">
      <div :class="{statement:true,tabbarActive:selectIndex==0}" @click="selectTabbar(0)">财务报表</div>
      <div :class="{assets:true,tabbarActive:selectIndex==1}" @click="selectTabbar(1)">固定资产</div>
    </div>
    <!-- 导航栏 end -->

    <div class="account-main" v-if="selectIndex==0">
      <div class="account-main-tit">当前账上余额</div>
      <div class="account-main-content">￥{{resultData.balance}}</div>
    </div>

  <!-- 报表分页 -->
  <div class="statement-wrapper" v-if="selectIndex==0">
        <!-- 搜索栏 -->
    <div class="search-wrapper">
      <div class="search-tit">按日期查询</div>
      <div class="search-btn">
        <div class="search-start">
          <picker mode="date"  @change="searchStart" >
            <div v-if="startTime">{{startTime}}</div>
            <div v-else>请选择开始时间</div>
          </picker>
        </div>
        <div>到</div>
        <div class="search-end">
          <picker mode="date"  @change="searchEnd" >
            <div v-if="endTime">{{endTime}}</div>
            <div v-else>请选择结束时间</div>
          </picker>
        </div>
      </div>
    </div>
    <!-- 搜索栏 end -->

    <div class="submit" @click="search">查询</div>

    <!-- 搜索结果 -->
    <div class="result" v-if='!firstFlag'>
      <div class="result-tit">结果汇总</div>
      <div class="result-detail">
        <div class="result-detail-item">
          <div class="result-detail-item-name">待返还费用</div>
          <div class="result-detail-item-content">{{resultData.wait_return_amount}}</div>
        </div>
        <div class="result-detail-item">
          <div class="result-detail-item-name">待缴会费</div>
          <div class="result-detail-item-content">{{resultData.wait_payment_amount}}</div>
        </div>
        <div class="result-detail-item">
          <div class="result-detail-item-name">应收款</div>
          <div class="result-detail-item-content">{{resultData.should_receipt}}</div>
        </div>
        <div class="result-detail-item">
          <div class="result-detail-item-name">已收款</div>
          <div class="result-detail-item-content">{{resultData.already_receipt}}</div>
        </div>
        <div class="result-detail-item">
          <div class="result-detail-item-name">支出</div>
          <div class="result-detail-item-content">{{resultData.expenditure}}</div>
        </div>
        <div class="result-detail-item">
          <div class="result-detail-item-name">收入</div>
          <div class="result-detail-item-content">{{resultData.income}}</div>
        </div>
      </div>
    </div>
    <!-- 搜索结果 end -->
  </div>
  <!-- 报表分页 end -->

    <!-- 固定资产分页 -->

    <div class="asset-wrapper" v-if='selectIndex==1'>
      <div class="asset-item">
        <div class="asset-item-name">名称</div>
        <div class="asset-item-num">数量</div>
        <div class="asset-item-price">预估价</div>
      </div>
      <div class="asset-item" v-for="(item,index) of assetData" :key="index">
        <div class="asset-item-name">{{item.name}}</div>
        <div class="asset-item-num">{{item.assets_num}}</div>
        <div class="asset-item-price">￥{{item.money}}</div>
      </div>
    </div>
    <!-- 固定资产分页 end -->
  </div>
</template>

<script>
export default {
  name:'financial-management',
  data() {
    return {
      firstFlag:'',//第一次加载
      startTime:'',
      endTime:'',
      selectIndex:0,//导航栏的选中状态
      resultData:'',//结果汇总
      page:1,
      assetData:[],//固定资产
    }
  },
  watch: {
    selectIndex(nval){
      if(nval==1){
        this.page=1;
        this.assetData=[];
        this.getFixedAssetsList()
      }
    }
  },
  methods: {
    searchStart(e){
      this.startTime=e.mp.detail.value
    },
    searchEnd(e){
      this.endTime=e.mp.detail.value
    },
    selectTabbar(index){
      this.selectIndex=index
    },
    search(){
      //查询
      this.firstFlag=false
      this.financialManagement()
    },
    async financialManagement(){
      //获取资产信息
      let userToken=wx.getStorageSync('userToken');
      const res=await this.$api.financialManagement({
        start_time:this.startTime,
        end_time:this.endTime,
        user_token:userToken
      })
      if(res.data.level=='success'){
          this.resultData=res.data.data
      }else{
        this.$currency.showToast(res.data.messsage)
      }
    },
    async getFixedAssetsList(){
      //获取固定资产
      let userToken=wx.getStorageSync('userToken');
      const res=await this.$api.getFixedAssetsList({
        user_token:userToken,
        limit:10,
        page:this.page
      })
      if(res.data.level=='success'){
        const data=this.assetData;
        this.assetData=[...data,...res.data.data]
      }else{
        this.$currency.showToast(res.data.messsage)
      }
    },
    initData(){
      this.page=1;
      this.firstFlag=true;
      this.assetData=[]
    }
  },
  onLoad() {
    this.initData()
    this.financialManagement()
  },
   onReachBottom(){
    this.page++;
    this.getFixedAssetsList()
  },
}
</script>

<style lang="scss" scoped>
  .financial-management{
    width:calc(100% - 20px);
    margin-left: 10px;
  }
  .tabbar{
    display: flex;
    margin:20px 0;
    &>div{
      flex:1;
      border:1px solid #eee;
      border-radius: 10px;
      text-align: center;
      margin:0 2.5px;
      padding:10px 0;
    }
    .tabbarActive{
      color:#fff;
      background-color: #2aa7e1;
      border:none !important;
    }
  }

  .account-main{
    &-tit{
      font-weight: 600;
    }
    &-content{
      margin-top:10px;
      color:#2aa7e1
    }
  }

  //搜索栏
  .search-wrapper{
    margin-top:30px;
    .search-tit{
      margin-bottom:20px;
    }
    .search-btn{
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    picker{
      border:1px solid #eee;
      border-radius: 10px;
      width: 130px;
      display: flex;
      align-items:center;
      justify-content: center;
      padding:10px 0;
    }
  }

  .submit{
    color:#fff;
    background-color: #2aa7e1;
    border-radius: 10px;
    text-align: center;
    margin:30px;
    padding:10px 0;
  }

  //搜索结果
  .result{
    &-tit{
      font-weight: 600;
      margin-bottom: 30px;
    }
    .result-detail-item{
      margin-left:10px;
      display: flex;
      padding:10px 0;
      border-bottom: 1px solid #eee;
      .result-detail-item-name{
        width:100px;

      }
    }
  }

  //固定资产
  .asset-wrapper{
    margin-top:30px;
    .asset-item{
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding:10px 0;
      border-bottom: 1px solid #eee;
      .asset-item-name{
        flex:1;
      }
      .asset-item-num{
        width: 80px;
      }
      .asset-item-price{
        width: 100px;
      }
    }
  }
</style>